<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=deviceWidth; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"/>
<title>Dew</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--Intializing CSS files ..................................................................................................-->
<link rel="stylesheet" href="css/jquery.mobile-1.0a2.min.css" />
<link rel="stylesheet" href="css/validationEngine.jquery_min.css" type="text/css"/>
<link rel="stylesheet" href="css/base/jquery.ui.all.css"/>


<!-- Intializing javascript files ..........................................................................................-->

<script type="text/javascript" src="js/jquery-1.7.2_min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0a2.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-1.8.1.js"></script>

<script type="text/javascript" src="js/formjs/jquery.validationEngine_min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/formjs/jquery.validationEngine-en_min.js"  charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.ui.core_min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/datepicker_min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/database_old.js" charset="utf-8"></script>
<script type="text/javascript" src="js/createfolder.js" charset="utf-8"></script>
<script type="text/javascript" src="js/simpledialogbox.js" charset="utf-8"></script>


<!--<script src="js/jquery-1.6.min.js" type="text/javascript" charset="utf-8"></script>-->
</head>



<!--Starting the body .....................................................................................................-->
<body onLoad ="initDB();">
     
<!-- log in page starts ...................................................................................................-->
	<div data-role="page" id="page1" data-theme="a" >
  		<div data-role="header" >
    	<h1>Login Page</h1>
  		</div>
  	<div data-role="content">
    	<!--<div class="wrap">-->
    
    <!-- log in form starts <img src="img/304490792.png" width="256" height="256">..............................................................................................-->
     		<form> 
    
    			<div data-role="fieldcontain">
	         		<label for="username">User Name </label>
	         		<input type="text" name="username" id="username" value="" />
				</div>
    
    			<div data-role="fieldcontain">
	         		<label for="password">Password </label>
	         		<input type="password" name="password" id="password" value="" />
     			</div>
			
            
    			<div class="ui-grid-a">
					<div class="ui-block-a"><button type="reset" data-theme="a">Cancel</button></div>
					<div class="ui-block-b"><a href="#icon-page" data-role="button">Submit</a></div>
        			<span>&nbsp;&nbsp;</span>
        			<div class="logo" align="center"><img src="img/leafBgn.png"></div>
    			</div>
               </form>
			</div>
		<!--</div>-->
		<div data-role="footer" data-position="fixed">Bluemountain Property (pvt) Ltd</div>
	</div>
    
    
<!-- Main menu page starting ...............................................................................................-->
    	
	<div data-role="page" id="icon-page"  data-theme="a">
		<div data-role="header" >
		<h1>Main menu</h1></div>
		<div data-role="content" class="ui-content">
			<!-- property details menu-->
			<ul data-role="listview" data-inset="true" data-theme="a"> 
				<li data-icon="document"><a href="#detail-page">
					<img src="img/details_compress.png" height="40px" />
					<h6>property details</h6>
					<p>Enter basic details of the property</p></a>
				</li>
                
				<!-- menu for take photos -->
				<li data-icon="image"> 
					
					<a href="#camera_page">
					<img src="img/camera_compress.png" height="40px" />
					<h3>Camera</h3>
					<p>Take pictures of the property</p></a>
				</li>
            
				<li data-icon="shuffle"><a href="#geo-page">
					<img src="img/satellite_compress.png" height="50px"  />
					<h3>GPS</h3>
					<p>activate the GPS</p></a>
				</li>
                
				<li data-icon="tag"><a href="#update-page">
					<img src="img/uplaod_compress.png" height="44px"  />
					<h3>Update to server</h3>
					<p>Update the property details to server</p></a>
				</li>
				
            
				<li data-icon="trash"><a href="#clear-page">
					<img src="img/clear.png" height="40px" />
					<h3>Clear</h3>
					<p>Clear login informations</p></a>
				</li>
			
			</ul>
        
		</div>
		<div data-role="footer" data-position="fixed">Bluemountain Property (pvt) Ltd</div>
	</div>
  
 

<!-- propert detail page starting ..........................................................................................-->
	
    <div data-role="page" id="detail-page" data-theme="a">
		<div data-role="header">
		<h1>property Details</h1>
		</div>
		<div data-role="content">
    
    <!-----------------------------------------------Starting the Form of property-details ---------------------------------->
    
			<form id="editpropForm"  method="post" >

					<!--<ul data-role="listview" data-inset="true" class="ui-content" >
					
						<li data-icon="alert">
						<div data-role="fieldcontain">
                			<fieldset data-role="controlgroup">
								<label for="select-choice-1" data-theme="a" class="ui-input-text-form">Prosepective Land</label><div data-role="fieldcontain">
								<select name="select-choice-1" id="select-choice-1" data-native-menu="false" data-theme="a" style="width:100%" data-icon="flag">
									<option value="yes" class="ui-content" data-icon="flag">Yes</option>
									<option value="no" class="ui-content" data-icon="plus">No</option>
								</select></div>
							</fieldset>				
                    	<!--</div>
                    </li>-->
                    
                    <div data-role="fieldcontain" align="center" data-ajax="false">
					
					<select name="select-choice-1" id="select-choice-1" data-native-menu="false" data-theme="a" style="width:100%">
						<option value="yes" class="" data-icon="flag">Prospective Land-Yes</option>
						<option value="no" class="ui-select" data-icon="plus">Prospective Land-No</option>
					</select>
					<!--</fieldset>-->
				</div>
				<ul data-role="listview" data-inset="true" class="ui-content">

					<li >
						<div data-role="fieldcontain">
							<label for="property_name" class="validate[required] ui-input-text-form">Property Name </label>
							
								<input type="text" name="property_name" id="property_name" value="" placeholder="property_name"/>
							
						</div>
					</li>
					<li >
						<div data-role="fieldcontain">
							<label for="address" class="ui-input-text-form">Address</label>
							<input type="hidden" name="address" /></div>
                
							<label for="street">Street</label>
							<input type="text" name="street" id="street" value="" placeholder="street"  data-prompt-position="topLeft:50" data-prompt-position="top:60"/>
                
							<label for="suburb">Suburb</label>
							<input type="text" name="suburb" id="suburb" value="" placeholder="suburb" class=" ui-input-text" data-prompt-position="topLeft:50"/>
							
							<label for="town">Town</label>
							<input type="text" name="town" id="town" value="" placeholder="" class=" ui-input-text " data-prompt-position="topLeft:50"/>
							
							<label for="district">District</label>
							<input type="text" name="district" id="district" value="" placeholder="district" class=" ui-input-text " data-prompt-position="topLeft:50"/>
					</li>
					
					<li>
						<div data-role="fieldcontain">
							<label for="date" class="ui-input-text-form">Date Launched</label>
							<input value="" class="ui-input-text datepicker" type="text" name="date" id="date" placeholder="date" data-prompt-position="topLeft:50" />
						</div>
					</li>

					<li>
						<div data-role="fieldcontain">
							<label for="owner_name" class="ui-input-text-form">Owner's Name</label>
							<input type="text" name="owner_name" id="owner_name" value="" placeholder="owner_name" class=" ui-input-text" data-prompt-position="topLeft:50"/>
						</div>
					</li>
            
					<li>
						<div data-role="fieldcontain">
							<label for="introducer" class="ui-input-text-form" id="introducer_field">Introducer&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<input type="text" name="introducer" id="introducer" value="" placeholder="introducer"/>
						</div>
					</li>

				</ul>
				
				<div data-role="fieldcontain">
					<button type="button" name="submit"  data-theme="a"  value="Save" id="editFormSubmitButton" onClick="createtable();createdir();">Save</button>
				</div>
				
				<div data-role="fieldcontain">
					<button type="button" name="refresh" id="refresh" data-theme="a"  value="ref"  onClick="celebsDataHandler();location.reload(true)" >ref</button>
				</div>
				
			</form>
        </div>
		<div data-role="footer" >Bluemountain Property (pvt) Ltd</div>
	</div>   
        
<!-------------------------------- GEO Locatin info page starts ------------------------------------------------------------->        
	<div data-role="page" id="geo-page" data-theme="a">
		<div data-role="header"><h1>Selection-page</h1></div>
		<div data-role="content" class="ui-content">
			<p id="geolocation">Finding geolocation...</p>
			<div data-role="fieldcontain">
				<button type="button" name="refresh" id="refresh" value="Refresh" onClick="clearWatch();" data-theme="a" >Refresh</button>
			</div>
  
		</div>
		<div data-role="footer" data-position="fixed" >Bluemountain Property (pvt) Ltd</div>
	</div>
    
    
    
    
<!------------------------------------ Camera page starts -------------------------------------------------------------------->

<div data-role="page" id="camera_page" data-theme="a">
		<div data-role="header"><h1>Camera-page</h1></div>
		<div data-role="content" class="ui-content">
			<div data-role="fieldcontain">
				<button onclick="getPhoto();" data-theme="a">Capture Photo</button> <br>
    			<!--<button onclick="capturePhotoEdit();" data-theme="a">Capture Editable Photo</button> <br>
    			<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);" data-theme="a">Choose from Photo Library</button><br>
    			<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);" data-theme="a">Choose from Photo Album</button><br>-->
    			<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    			<img style="display:none;" id="largeImage" src="" />
			</div>
  
		</div>
		<div data-role="footer" data-position="fixed">Bluemountain Property (pvt) Ltd</div>
	</div>

 
 <!-- -------------------after-property submission popup ask whether  camera app  launch or not----------- -->
 		<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
					<div data-role="header" data-theme="a" class="ui-corner-top">
						<h1>Delete Page?</h1>
					</div>
					<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
						<p><strong>Do you want to take the pictures of the property ?</strong></p>
						<a href="#camera_page" data-role="button" data-inline="true" data-rel="back" data-theme="c">Yes</a>    
						<a href="#detail-page" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">No</a>  
					</div>
		</div>
	
		<div data-role="footer" data-position="fixed">Bluemountain Property (pvt) Ltd</div>
 

 
 
 <!-- Java Scripts for Camera, GPS, Date picker Starting -------------------------------------------------------------------->  


 <!--  
<script type="text/javascript" charset="utf-8">

    // Called when capture operation is finished
    //
    function captureSuccess(mediaFiles) {
        var i, len;
        for (i = 0, len = mediaFiles.length; i < len; i += 1) {
            uploadFile(mediaFiles[i]);
        }       
    }

    // Called if something bad happens.
    // 
    function captureError(error) {
        var msg = 'An error occurred during capture: ' + error.code;
        navigator.notification.alert(msg, null, 'Uh oh!');
    }

    // A button will call this function
    //
    function captureImage() {
        // Launch device camera application, 
        // allowing user to capture up to 2 images
        navigator.device.capture.captureImage(captureSuccess, captureError, {limit: 2});
    }

    // Upload files to server
    function uploadFile(mediaFile) {
        var ft = new FileTransfer(),
            path = mediaFile.fullPath,
            name = mediaFile.name;

        
        ft.upload(path,
            "/mnt/sd/property",
            function(result) {
                console.log('Upload success: ' + result.responseCode);
                console.log(result.bytesSent + ' bytes sent');
            },
            function(error) {
                console.log('Error uploading file ' + path + ': ' + error.code);
            },
            { fileName: name });   
    }

    </script>

-->






<!-- <script type="text/javascript" charset="utf-8">
	function capturePhoto(){
   	 navigator.camera.getPicture(uploadPhoto,null,{sourceType:1,quality:60});
   	 }
	
	function uploadPhoto(data){
		// this is where you would send the image file to server
		 
		    cameraPic.src = "data:image/jpeg;base64," + data;
		    // Successful upload to the server
		    navigator.notification.alert(
		        'Your Photo has been saved',  // message
		        okay,                           // callback
		        'Photo Save',              // title
		        'OK'                          // buttonName
		    );
		 
		    // upload has failed Fail
		 
		    /* 
		 
		    if (failedToUpload){
		 
		    navigator.notification.alert(
		        'Your Photo has failed to upload',
		        failedDismissed,
		        'Photo Not Uploaded',
		        'OK'
		        );
		 
		    }
		    */
		 
		}
		 
		function okay(){
		    // Do something
		}
</script>-->

<script type="text/javascript">

var pictureSource;   // picture source
    var destinationType; // sets the format of returned value 

    // Wait for PhoneGap to connect with the device
    //
    document.addEventListener("deviceready",onDeviceReady,false);

    // PhoneGap is ready to be used!
    //
    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoDataSuccess(imageData) {
      // Get image handle
      //
      var smallImage = document.getElementById('smallImage');

      // Unhide image elements
      //
      smallImage.style.display = 'block';

      // Show the captured photo
      // The inline CSS rules are used to resize the image
      //
      smallImage.src = "data:image/jpeg;base64," + imageData;
    }
    
	// Called when a photo is successfully retrieved
    //
    function onPhotoFileSuccess(imageData) {
      // Get image handle
      console.log(JSON.stringify(imageData));
      
   	  // Get image handle
      //
      var smallImage = document.getElementById('smallImage');

      // Unhide image elements
      //
      smallImage.style.display = 'block';

      // Show the captured photo
      // The inline CSS rules are used to resize the image
      //
      smallImage.src = imageData;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoURISuccess(imageURI) {
      // Uncomment to view the image file URI 
       console.log(imageURI);

      // Get image handle
      //
      var largeImage = document.getElementById('largeImage');

      // Unhide image elements
      //
      largeImage.style.display = 'block';

      // Show the captured photo
      // The inline CSS rules are used to resize the image
      //
      largeImage.src = imageURI;
      
      parentEntry = new DirectoryEntry({fullPath: largeImage});
      imageURI.moveTo(parentEntry,"property.jpg",sucess,fail);
    }
    
    
    function sucess(imageURI){
    	console.log("New path:" +imageURI.fullpath);
    }
    
    function fail(error){
    	alert('error');
    }

    // A button will call this function
    //
    function capturePhotoWithData() {
      // Take picture using device camera and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
    }

    function capturePhotoWithFile() {
        navigator.camera.getPicture(onPhotoFileSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });
    }
    
    // A button will call this function
    //
    function getPhoto(source) {
      // Retrieve image file location from specified source
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }

    // Called if something bad happens.
    // 
    function onFail(message) {
      alert(/*'Failed because: ' + message*/"you didn't take any pictures");
    }
    


</script>-

<!--  
<script type="text/javascript">
function capturePhoto(id) { 
	navigator.camera.getPicture(onSuccess, onFail, { quality: 20,
	destinationType: Camera.DestinationType.FILE_URI });    

	function onSuccess(imageURI) {  
	var image = document.getElementById(id);  

	image.style.display = 'block'; 
	image.src = imageURI;  

	}   

	function onFail(message) {  
	alert('Failed because: ' + message);  
	}  
	}




var gotFileEntry = function(fileEntry) { 
    console.log("got image file entry: " + fileEntry.fullPath); 
    var gotFileSystem = function(fileSystem){ 
        // copy the file 
        fileEntry.moveTo(fileSystem.root, "pic.jpg", null, null); 
   }; 
    // get file system to copy or move image file to 
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFileSystem, fsFail); 
}; 
//resolve file system for image  
window.resolveLocalFileSystemURI(imageURI, gotFileEntry, fsFail); 
}

//file system fail 
function fsFail(error) { 
console.log("failed with error code: " + error.code); 
}; 


</script>
-->

<script type="text/javascript" charset="utf-8">
	//starting gps tracking code....................................................................................
	document.addEventListener("deviceready", onDeviceReady, false);// Wait for PhoneGap to load

    var watchID = null;

    // PhoneGap is ready
    function onDeviceReady() {
        // Update every 3 seconds
        watchID = navigator.geolocation.watchPosition(onSuccess, onError,{ maximumAge: 3000,enableHighAccuracy:true,timeout:100000});
    }

    // onSuccess Geolocation
    function onSuccess(position) {
        var element = document.getElementById('geolocation');
        element.innerHTML = 'Latitude: '  + position.coords.latitude      + '<br />' +
                            'Longitude: ' + position.coords.longitude     + '<br />' +
                            '<hr />'      + element.innerHTML;
    }

    // clear the watch that was started earlier
    function clearWatch() {
        if (watchID != null) {
            navigator.geolocation.clearWatch(watchID);
            watchID = null;
        }
    }

    // onError Callback receives a PositionError object
    function onError(error) {
      alert(/*'code: '    + error.code    + '\n' +
            'Error: ' + error.message + '\n'*/'Please on the GPS on your phone before launch the app. ');
    }

    
//Form Validating..........................................................................
jQuery(document).ready(function(){
	//onSuccess:function() {createTables()},
			//ajaxSubmit: false,
			//success : true;
			// binds form submission and fields to the validation engine
			jQuery("#formD").validationEngine({autoHidePrompt:true});
			$( ".datepicker" ).datepicker();
			//ajaxFormValidation : false;
			//onSuccess : function createTables(){
				//alert ('1');
			//}
			  
			//ajaxFormValidation: true,
			//onAjaxFormComplete: function(form, status){
             //   alert("The form status is: " +status);
            //}
			//
			
		<!-- hide the form validation elements ----->	
			$(document).on('pagehide', function () {
    		$('#formI').validationEngine('hideAll');
});

});
</script>
<script type="text/javascript">
/*..................................Hide & show Introducer according to prospectiva land or not.........*/

//$("#simplebool").load("#after-property_page").dialog({modal:true});




/*function pageload(e){
	//$mobile.changePage('#after-property_page',{transition:'pop'role:"dialog"});
}*/
/*
$(document).delegate("#simplebool", 'click', function() {
  $(this).simpledialog({
    'mode' : 'bool',
    'prompt' : 'How about it?',
    'useModal': true,
    'buttons' : {
      'OK': {
        click: function () {
          $('#dialogoutput').text('OK');
        }
      },
      'Cancel': {
        click: function () {
          $('#dialogoutput').text('Cancel');
        },
        icon: "delete",
        theme: "c"
      }
    }
  })
})


//$("#editFormSubmitButton").on("click", function() {
//	  mobile.changePage("#detail-page", "flip", true, false);
//	});

/*
//using changePage to submit a form
$("#my-form").bind("submit", function() {
  if (validateFormData()) {
    changePage({
      url: "form-processor.php",
      type: "post",
      data: myFormData
    }, false);
  }
});
*/




//refresh the detail-page after submission
$('#editFormSubmitButton').click(function() {
    //alert('Button has been clicked');
    $.mobile.changePage("#detail-page", "flip", true, false);
    
});


$(function(){
	$("#popupDialog").dialog();
});

</script>


</body>
</html>
